<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>好好录屏</title>
    <link rel="stylesheet" href="./assets/css/normalize.css">
    <link rel="stylesheet" href="index.css"></link>
    <!-- <script src="./assets/lib-flexible/flexible_css.debug.js"></script> -->
    <script src="./assets/lib-flexible/flexible.debug.js"></script>
</head>
<body>
    <div class="content">
        <div class="tool-title">
            <div class="box-set">
                <div class="set-video">设置</div>
                <div class="set-video">屏幕</div>
                <div class="set-audio">系统声音</div>
                <div class="set-hotkey">麦克风</div>
                <div class="set-shortcut">摄像头</div>
                <div class="set-about">关于</div>
            </div>
            <div class="box-title">好好录屏</div>
            <div class="box-oprate">
                <div class="box-min">
                    <span class="iconfont">&#xe60e;</span>
                </div>
                <div class="box-max">
                    <span class="iconfont">&#xe653;</span>
                </div>
                <div class="box-close">
                    <span class="iconfont">&#xe631;</span>
                </div>
            </div>
        </div>
        <div class="tool-body">
            <div class="box-options">
                <div class="menu">
                    <div class="menu-area menu-ishow" data-id="area">录制区域</div>
                    <div class="menu-camera" data-id="camera">摄像头</div>
                    <div class="menu-tape" data-id="tape">录音</div>
                    <div class="menu-watermark" data-id="watermark">水印</div>
                    <div class="menu-hotkey" data-id="hotkey">热键</div>
                    <div class="menu-livetv" data-id="livetv">直播</div>
                </div>
                <div class="minute">
                    <div class="minute-area" data-for="area">
                        <p>录制区域</p>
                        <div class="area-content">
                            <div class="full-sccren">
                                <input type="checkbox" id ="full-sccren" value="full-sccren">
                                <label for="full-sccren">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe650;</span>
                                    </div>
                                    <span>全屏录制</span>
                                </label>
                            </div>
                            <div class="mediun">
                                <input type="checkbox" id="mediun"  value="mediun">
                                <label for="mediun">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe990;</span>
                                    </div>
                                    <span>窗口录制</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="minute-camera minute-ishow" data-for="camera">
                        <p>摄像头录制</p>
                        <div class="camera-content">
                            <div class="camera">
                                <input type="checkbox" id="camera" name="camera" value="camera">
                                <label for="camera">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe60b;</span>
                                    </div>
                                    <span>摄像头录制</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="minute-tape minute-ishow" data-for="tape">
                        <p>声音录制</p>
                        <div class="tape-content">
                            <div class="audio-sys">
                                <input type="checkbox" id="audio-sys" name="sys">
                                <label for="audio-sys">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe662;</span>
                                    </div>
                                    <span>系统声音</span>
                                </label>
                            </div>
                            <div class="audio-macr">
                                <input type="checkbox" id="audio-macr">
                                <label for="audio-macr">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe8c2;</span>
                                    </div>
                                    <span>麦克风声音</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="minute-watermark minute-ishow" data-for="watermark">
                        <div class="watermark-title">
                            <label for="watermark-title">内容:</label>
                            <input class="title" type="text" id="watermark-title">
                        </div>
                        <p>水印</p>
                        <div class="watermark-content">
                            <div class="watermark">
                                <input type="checkbox" id="watermark">
                                <label for="watermark">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe657;</span>
                                    </div>
                                    <span>水印</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="minute-hotkey minute-ishow" data-for="hotkey">
                        <p>热键</p>
                        <div class="hotkey-content">
                            <div>
                                <input type="checkbox" id="hotkey">
                                <label for="hotkey">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe6ff;</span>
                                    </div>
                                    <span>热键</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="minute-livetv minute-ishow" data-for="livetv">
                        <p>直播</p>
                        <div class="livetv-content">
                            <div>
                                <input type="checkbox" id="livetv">
                                <label for="livetv">
                                    <div class="icon-img">
                                        <span class="iconfont ico-size">&#xe6ff;</span>
                                    </div>
                                    <span>直播</span>
                                </label>
                            </div>
                        </div>
                        <form action="">
                            <div class="plug-address">
                                <label for="plug-address">推流地址:</label>
                                <input class="title" type="text" id="plug-address">
                            </div>
                            <div class="plug-code">
                                <label for="plug-code">推流码:</label>
                                <input class="title" type="text" id="plug-code">
                            </div>
                        </form>
                            <div class="plug-btn">
                                <button class="start-plug">开始推流</button>
                            </div>
                    </div>
                </div>
            </div>
            <div class="box-video">
                <video class="monitor" muted></video>
                <div class="details">
                    <span>帧率(FPS): 60</span>
                    <span>显示器: 1920x1080</span>
                </div>
            </div>
        </div>
        <div class="tool-controls">
            <div class="box-start">
                <span class="iconfont ico-size">&#xe650;</span>
                <span class="iconfont ico-size start-ishow">&#xe600;</span>
            </div>
            <div class="box-stop">
                <span class="iconfont  ico-size">&#xe649;</span>
            </div>
            <div class="box-screen">
                <span class="iconfont ico-size">&#xea68;</span>
            </div>
            <div class="box-micr-audio">
                <span class="iconmicr  iconfont ico-size micr-ishow">&#xe8c2;</span>
                <span class="iconbanmicr iconfont ico-size ban ">&#xe66f;</span>
            </div>
            <div class="box-sys-audio">
                <span class="iconsys iconfont ico-size sys-ishow">&#xe662;</span>
                <span class="iconbansys iconfont ico-size ban">&#xe90b;</span>
            </div>
            <div class="box-show">
                <span class="iconfont ico-size">&#xe686;</span>
            </div>
            <div class="box-time">
                <span class="ico-size time">00:00:00</span>
            </div>
        </div>
    </div>
    <div class="load">
        <div class="loading_box">
            <div class="item_box1"></div>
            <div class="item_box2"></div>
            <div class="item_box3"></div>
            <div class="item_box4"></div>
            <div class="item_box5"></div>
        </div>
    </div>
    <script src="index.js"></script>
    <script src="./title.js"></script>
    <script src="./body.js"></script>
    <script src="./end.js"></script>
</body>
</html>